<template>
  <div v-show="show" class="fenleilist">
    <slot></slot>
    <mt-index-list :height="contHeight">
      <mt-index-section v-for="(item, index) in brandsData" :key="index" :index="item.alphabet">
        <div v-for="cell in item.brands" @click="chooseClassify(cell)">
          <mt-cell >
            <span class="logo"><img :src="cell.brand_pic"></span>
            <span style="font-size: 14px;">{{cell.brand_enname + '/' + cell.brand_name}}</span>
          </mt-cell>
        </div>
      </mt-index-section>
    </mt-index-list>
  </div>
</template>

<script>
  import {IndexList, IndexSection, Cell} from 'mint-ui'
  export default{
    data() {
      return {
        show2: true
      }
    },
    props: {
      show: {
        type: Boolean,
        default: function () {
          return true
        }
      },
      contHeight: {
        type: Number,
        defualt: function () {
          return ''
        }
      },
      brandsData: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    components: {
      'mtIndexList': IndexList,
      'mtIndexSection': IndexSection,
      'mtCell': Cell
    },
    mounted() {
      document.addEventListener('touchend', this.hide, false)
    },
    beforeDestroy() {
      document.removeEventListener('touchend', this.hide)
    },
    methods: {
      chooseClassify(item) {
        this.$emit('chooseClassify', item)
      }
    }
  }
</script>

<style>
  .mint-indexsection-index{font-size: 16px;font-weight: bold;background-color: #fff !important;}
  .fenliezimu .fenleilist ul li{height: auto !important;line-height: 0.6rem !important;}
  .fenleilist .mint-cell-title{flex: 0;}
  .fenleilist .mint-cell-wrapper{padding: 0 5px;background-image: none !important;}
  .fenleilist .mint-cell{background-image: none !important;}
  .fenliezimu .fenleilist .mint-indexlist-content{overflow: auto !important;padding-bottom: 100px;}

  .fenliezimu .fenleilist .logo{height: auto !important;margin:0 5px 0 0 !important;}
  .mint-indexlist-nav{
    justify-content: left !important;
    position: fixed!important;
    right: 5px!important;
    top: 20%!important;
    line-height: 13px!important;
    font-size: 12px!important;
    text-align: center!important;
    color: #50a3ff!important;
    border-left: solid 1px #fff!important;
    display: table!important;
    height: 10%!important;
    background-color: transparent!important;
    z-index: 1;
    /*margin-top: 50px;*/
  }
  .mint-indexlist-navlist {
    padding: 0;
    margin: 0;
    list-style: none;
    max-height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    /*display: flex;*/
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    display: table-cell!important;
    vertical-align: middle!important;
    background-color:transparent;
  }
  .mint-indexlist-navitem {
    padding: 0px 6px;
  }
  .fenliezimu .fenleilist ul {
    padding: 0 10px;
    overflow: hidden;
    background-color:transparent!important;
  }
</style>
